<template>
  <img :src="base64" />
</template>

<script name="Home" setup lang="ts">
import { useRoute } from 'vue-router';
import { getReadlTmplInfo } from '@/api/user';
import { fabric } from 'fabric';
import Editor, { IEditor } from '@kuaitu/core';

// 创建编辑器
const canvasEditor = new Editor() as IEditor;

const base64 = ref('');
onMounted(async () => {
  // 初始化fabric
  const canvas = new fabric.StaticCanvas(null);

  // 初始化编辑器
  canvasEditor.initD(canvas);

  // 有ID时，打开作品面板
  const route = useRoute();
  if (route?.query?.code) {
    var res = await getReadlTmplInfo(route?.query?.code);
    canvasEditor.loadJSON(JSON.stringify(res?.data?.data?.attributes?.json));
    setTimeout(async () => {
      var dataUrl = await canvasEditor.preview();
      base64.value = dataUrl;
    }, 80);
  }
});

onUnmounted(() => canvasEditor.destory());
</script>
